<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>BOM浏览器对象模型</title>
  </head>
  <body>
    <button id="btn1">跳转</button>
    <button id="btn2">刷新</button>
    <button id="btn3">返回</button>
    <script>
      // BOM（Browser Object Model）常用的操作：
      // 返回上一页: history.back()/go(-1)

      // 获取用户设备信息：navigator.appVersion
      console.log(navigator.appVersion);

      // 获取地址栏信息
      // console.log(location);

      //  跳转
      //   location.href = '新地址'
      //  刷新(普通)
      //  location.reload(); 或  history.go(0)

      //  强制刷新（ctrl + f5）

      let btn1Ele = document.getElementById("btn1");
      let btn2Ele = document.getElementById("btn2");
      let btn3Ele = document.getElementById("btn3");
      btn1Ele.addEventListener("click", function () {
        // location.href = "./26-阻止事件冒泡.html";
        location.href = "20-other.html";
      });

      btn2Ele.addEventListener("click", function () {
        location.reload();
      });

      btn3Ele.addEventListener("click", function () {
        history.back();
      });
    </script>
  </body>
</html>
